<template>
  <el-drawer :title="'用户信息'" v-model="props.userInfo.isShow">
    <template #default>
      <el-scrollbar class="info-scrollbar">
        <el-image
          :src="props.userInfo.info.avatar"
          class="avatar"
          :preview-src-list="[props.userInfo.info.avatar]"
        >
          <template #error>
            <el-image :src="errorImageUrlConstant" class="avatar" />
          </template>
        </el-image>
        <div class="content">
          <p>用户名：{{ props.userInfo.info.username }}</p>
          <p>用户类型：{{ props.userInfo.info.accountType }}</p>
          <p>邮箱：{{ props.userInfo.info.email }}</p>
          <p>手机号：{{ props.userInfo.info.phone }}</p>
          <p>注册时间：{{ props.userInfo.info.createTime }}</p>
          <p>跟新时间：{{ props.userInfo.info.updateTime }}</p>
        </div>
      </el-scrollbar>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { errorImageUrlConstant } from "@/constant";
const props = defineProps({
  userInfo: Object as () => any,
});
</script>

<style scoped>
.info-scrollbar {
  display: flex;
  justify-content: center;
}
.avatar {
  display: block;
  width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto;
}
.content {
  text-align: left;
}

.content p {
  margin: 20px 0;
}
</style>
